<template>
  <div class="root">
     <div id="main" class="main"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    console.log('echarts:', echarts); 
    if (!echarts) {
      console.error('echarts 模块未正确导入');
      return;
    }
    var chartDom = this.$el.querySelector('#main');
    var myChart = echarts.init(chartDom);
    var option;

    // 假设这是北京近七日的日期
    const dates = ['2025-03-09', '2025-03-10', '2025-03-11', '2025-03-12', '2025-03-13', '2025-03-14', '2025-03-15'];
    // 假设这是北京近七日的人口涌入数据
    const influxData = [12000, 13500, 19800, 14200, 15690, 16300, 17500];

    option = {
      title: {
        text: '上海近七日人口涌入图',
        left: 'center',
        textStyle: {
          color: '#fff'
        }
      },
      tooltip: {
        trigger: 'axis',
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        data: ['人口涌入数量'],
        top: '5%',
        textStyle: {
          color: '#fff'
        }
      },
      grid: {
        left: '13%',
        right: '5%',
        top: '15%',
        bottom: '10%'
      },
      xAxis: {
        type: 'category',
        data: dates,
        axisLabel: {
          color: '#fff'
        }
      },
      yAxis: {
        type: 'value',
        name: '人口数量',
        axisLabel: {
          color: '#fff'
        },
        nameTextStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          name: '人口涌入数量',
          data: influxData,
          type: 'line'
        }
      ]
    };

    option && myChart.setOption(option);
  }
};
</script>
<style lang="scss" scoped>
.root {
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: none; 
}
.main {
  width: 420px; 
  height: 320px;
  margin: 0 auto;
}
</style>    